
// Extends
%clearfix:after {
	display:block;
	clear:both;
	content:'';
}

// Grid System
$grid-spacing:3%;

.grid {
	padding:$grid-spacing;
	background:#f6f7f8;

	[class^="col-"] {
		padding:8px;
		text-align:center;
		color:#767779;
	}
}

.row {
	@extend %clearfix;

	& + & {
		margin-top:$grid-spacing;
	}
}

[class^="col-"] {
	float:left;
	margin-right:$grid-spacing;
	-webkit-box-sizing:border-box; 
	-moz-box-sizing:border-box; 
	box-sizing:border-box;

	&:last-child {
		margin-right:0%;
	}
}

// Columns (Manual)
/*
.col-1  { width:5.583333333333333%; }
.col-2  { width:14.16666666666667%; }
.col-3  { width:22.75%; }
.col-4  { width:31.33333333333333%; }
.col-5  { width:39.91666666666667%; }
.col-6  { width:48.5%; }
.col-7  { width:57.08333333333333%; }
.col-8  { width:65.66666666666666%; }
.col-9  { width:74.25%; }
.col-10 { width:82.83333333333333%; }
.col-11 { width:91.41666666666666%; }
.col-12 { width:100%; }
*/

// Columns (Automatic)
.col-1   { width:calc(100% / 12) - calc($grid-spacing * 11 / 12); }
.col-2   { width:calc(100% / 6) - calc($grid-spacing * 10 / 12); }
.col-3   { width:calc(100% / 4) - calc($grid-spacing * 9 / 12); }
.col-4   { width:calc(100% / 3) - calc($grid-spacing * 8 / 12); }
.col-5   { width:calc(100% / 2.4) - calc($grid-spacing * 7 / 12); }
.col-6   { width:calc(100% / 2) - calc($grid-spacing * 6 / 12); }
.col-7   { width:calc(100% / 1.714285714285714) - calc($grid-spacing * 5 / 12); }
.col-8   { width:calc(100% / 1.5) - calc($grid-spacing * 4 / 12); }
.col-9   { width:calc(100% / 1.333333333333333) - calc($grid-spacing * 3 / 12); }
.col-10  { width:calc(100% / 1.2) - calc($grid-spacing * 2 / 12); }
.col-11  { width:calc(100% / 1.090909090909091) - calc($grid-spacing * 1 / 12); }
.col-12  { width:100%; }
